<script setup>
  import { ref } from 'vue'

  const props = defineProps({
    regionList: {
      type: Array,
      default: () => []
    }
  })

  const currentIndex = ref(0)
  // 选择区域
  const onAreaSelect = (index) => {
    if (index === currentIndex.value) return
    currentIndex.value = index
  }

  defineExpose({
    currentIndex
  })
</script>

<template>
  <view class="filter-by-area">
    <view
      class="filter-by-area-item"
      v-for="(item, index) in props.regionList"
      :key="item.id"
      @click="onAreaSelect(index)"
    >
      <text
        class="filter-by-area-item-text"
        :class="{ active: index === currentIndex }"
        >{{ item.name }}</text
      >
      <bit-icon
        color="#0FA1FE"
        v-if="index === currentIndex"
        >&#xe648;</bit-icon
      >
    </view>
  </view>
</template>

<style lang="scss" scoped>
  @import '@/styles/variable.scss';
  .filter-by-area {
    &-item {
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20rpx 24rpx;
      font-size: var(--font-size-md);
      color: var(--text-color-dark);
      border-bottom: 1rpx solid #e9e9e9;
      &-text {
        &.active {
          color: var(--text-active-color);
        }
      }
    }
  }
</style>
